<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('配置接口的情况下设置初始选中的数据')}`">{{ $t('配置接口的情况下设置初始选中的数据') }}</t>
            <li>
                当你配置了<span class="s-code">requestConfig</span>自动请求获取树数据，并且需要设置初始选中某些数据，
                而恰好你绑定的<span class="s-code">v-model</span>的初始值为数据行<span class="s-code">rowKey</span>组成的数组。
                此时你可能就需要通过额外的<span class="s-code">formated-value</span>展示输入框内的初始文本了
            </li>
            <li>
                因为列表的数据是必须在你点击打开弹窗时才会去发起请求的，而如果你传入的是类似<span class="s-code">['1', '2']</span>这样的值，
                那么组件内部是无法知道这些<span class="s-code">rowKey</span>对应的<span class="s-code">name</span>的，所以可能会导致输入框内文案展示异常
            </li>
        </template>
        <div style="width: 300px;">
            <sib-item v-model="value" :props="props" :formated-value="formatedValue"></sib-item>
        </div>
        <p style="color: #666;">当前选择的是：{{ value && value.length ? value : '--' }}</p>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(['1', '2']);
        const formatedValue = '张三,奔跑的提款机';
        const props = reactive({
            type: 'table',
            dialogWidth: '900px',
            multiple: true,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
        });

        return {
            props,
            value,
            formatedValue,
            templateString: `<template>
    <sib-item v-model="value" :props="props" :formated-value="formatedValue"></sib-item>
    <p>当前选择的是：{{ value && value.length ? value : '--' }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const value = ref(['1', '2']);
        const formatedValue = '张三,奔跑的提款机';
        const props = reactive({
            type: 'table',
            dialogWidth: '900px',
            multiple: true,
            searchConfig: {
                fields: [{ label: '姓名', code: 'name', type: 'text' }],
            },
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '人员编码', code: 'code' },
            ],
            requestConfig: {
                url: '/api/list-data.json',
                method: 'get',
                params: {},
            },
        });

        return { props, value, formatedValue };
    },
};
<\/script>`,
        };
    },
};
</script>
